import React, { useEffect, useState } from 'react';
import { Card, Form } from 'react-bootstrap';

const SecuritySettings = ({ config, setConfig }) => {
  // 组件内部默认配置
  const defaultConfig = {
    // 反作弊设置
    battleye: 1,
    verifySignatures: 0,
    forceSameBuild: 1,
    
    // 安全检测
    speedHackDetection: 1,
    multiHackProtection: 0,
    multiAccountProtection: 0,
    verifyScheduledShots: 1,
    verifyWeaponFire: 1,
    debugDisabled: 1,
    freezeCheck: 1,
    scriptDebug: 0,
    freezeCheckTimeout: 5,
    
    // 客户端设置
    clientTimeout: 10,
    
    // 网络设置与限制
    globalQueueSize: 20,
    maxMsgSend: 128,
    maxCustomFileSize: 10
  };

  // 组件内部状态，用于表单输入临时存储
  const [localConfig, setLocalConfig] = useState(defaultConfig);

  // 当外部config变化时，更新内部localConfig
  useEffect(() => {
    const mergedConfig = {
      ...defaultConfig,
      ...config
    };
    setLocalConfig(mergedConfig);
  }, [config]);

  // 处理配置变更，同时更新本地状态和全局配置
  const handleConfigChange = (key, value) => {
    setLocalConfig(prev => ({ ...prev, [key]: value }));
    setConfig(prev => ({ ...prev, [key]: value }));
  };

  return (
    <Card className="h-100 border-3 shadow-medium" style={{backgroundColor: 'rgba(26, 26, 26, 0.6)', backdropFilter: 'blur(15px)', borderColor: '#28a745', boxShadow: '0 0 20px rgba(40, 167, 69, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(40, 167, 69, 0.2)'}}>
      <Card.Header style={{backgroundColor: 'rgba(40, 40, 40, 0.7)', backdropFilter: 'blur(15px)'}}>
        <h3 style={{color: 'var(--primary-color)'}}>安全与反作弊设置</h3>
      </Card.Header>
      <Card.Body style={{color: '#ffffff', maxHeight: '70vh', overflowY: 'auto'}}>
        {/* 基础安全设置 */}
        <h4 style={{color: '#ff6b6b', marginBottom: '15px', borderBottom: '1px solid rgba(255,255,255,0.1)', paddingBottom: '5px'}}>基础安全设置</h4>
        <div className="row mb-4">
          <div className="col-md-4">
            <Form.Group className="mb-3">
              <Form.Check 
                type="switch" 
                id="battleye" 
                label="BattlEye反作弊" 
                checked={localConfig.battleye === 1} 
                onChange={() => handleConfigChange('battleye', localConfig.battleye === 1 ? 0 : 1)} 
                className="form-switch-glow"
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                启用BattlEye反作弊系统
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-4">
            <Form.Group className="mb-3">
              <Form.Check 
                type="switch" 
                id="verifySignatures" 
                label="签名验证" 
                checked={localConfig.verifySignatures === 1} 
                onChange={() => handleConfigChange('verifySignatures', localConfig.verifySignatures === 1 ? 0 : 1)} 
                className="form-switch-glow"
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                验证客户端文件签名
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-4">
            <Form.Group className="mb-3">
              <Form.Check 
                type="switch" 
                id="forceSameBuild" 
                label="版本强制" 
                checked={localConfig.forceSameBuild === 1} 
                onChange={() => handleConfigChange('forceSameBuild', localConfig.forceSameBuild === 1 ? 0 : 1)} 
                className="form-switch-glow"
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                强制玩家使用与服务器相同的游戏版本
              </Form.Text>
            </Form.Group>
          </div>
        </div>

        {/* 高级反作弊设置 */}
        <h4 style={{color: '#ff6b6b', marginBottom: '15px', borderBottom: '1px solid rgba(255,255,255,0.1)', paddingBottom: '5px'}}>高级反作弊设置</h4>
        <div className="row mb-4">
          <div className="col-md-4">
            <Form.Group className="mb-3">
              <Form.Label>速度黑客检测</Form.Label>
              <Form.Control 
                type="number" 
                id="speedHackDetection" 
                min="0" 
                max="10" 
                step="0.1" 
                value={localConfig.speedHackDetection} 
                onChange={(e) => handleConfigChange('speedHackDetection', parseFloat(e.target.value) || 0)} 
                className="glass-input"
                style={{backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff'}}
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                启用速度黑客检测，值范围1-10（1严格，10宽松，可以是浮点数）
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-4">
            <Form.Group className="mb-3">
              <Form.Check 
                type="switch" 
                id="verifyScheduledShots" 
                label="射击验证" 
                checked={localConfig.verifyScheduledShots === 1} 
                onChange={() => handleConfigChange('verifyScheduledShots', localConfig.verifyScheduledShots === 1 ? 0 : 1)} 
                className="form-switch-glow"
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                验证射击动作的合法性
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-4">
            <Form.Group className="mb-3">
              <Form.Check 
                type="switch" 
                id="verifyWeaponFire" 
                label="武器射击验证" 
                checked={localConfig.verifyWeaponFire === 1} 
                onChange={() => handleConfigChange('verifyWeaponFire', localConfig.verifyWeaponFire === 1 ? 0 : 1)} 
                className="form-switch-glow"
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                验证武器射击的合法性
              </Form.Text>
            </Form.Group>
          </div>
        </div>
        <div className="row mb-4">
          <div className="col-md-4">
            <Form.Group className="mb-3">
              <Form.Check 
                type="switch" 
                id="multiHackProtection" 
                label="多开保护" 
                checked={localConfig.multiHackProtection === 1} 
                onChange={() => handleConfigChange('multiHackProtection', localConfig.multiHackProtection === 1 ? 0 : 1)} 
                className="form-switch-glow"
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                防止同一计算机多开客户端
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-4">
            <Form.Group className="mb-3">
              <Form.Check 
                type="switch" 
                id="multiAccountProtection" 
                label="多账户保护" 
                checked={localConfig.multiAccountProtection === 1} 
                onChange={() => handleConfigChange('multiAccountProtection', localConfig.multiAccountProtection === 1 ? 0 : 1)} 
                className="form-switch-glow"
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                防止同一IP使用多个账户登录
              </Form.Text>
            </Form.Group>
          </div>
        </div>

        {/* 调试与监控 */}
        <h4 style={{color: '#ff6b6b', marginBottom: '15px', borderBottom: '1px solid rgba(255,255,255,0.1)', paddingBottom: '5px'}}>调试与监控</h4>
        <div className="row mb-4">
          <div className="col-md-4">
            <Form.Group className="mb-3">
              <Form.Check 
                type="switch" 
                id="debugDisabled" 
                label="禁用调试" 
                checked={localConfig.debugDisabled === 1} 
                onChange={() => handleConfigChange('debugDisabled', localConfig.debugDisabled === 1 ? 0 : 1)} 
                className="form-switch-glow"
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                禁用客户端调试功能
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-4">
            <Form.Group className="mb-3">
              <Form.Check 
                type="switch" 
                id="freezeCheck" 
                label="冻结检查" 
                checked={localConfig.freezeCheck === 1} 
                onChange={() => handleConfigChange('freezeCheck', localConfig.freezeCheck === 1 ? 0 : 1)} 
                className="form-switch-glow"
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                检测并踢出无响应的客户端
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-4">
            <Form.Group className="mb-3">
              <Form.Check 
                type="switch" 
                id="scriptDebug" 
                label="脚本调试" 
                checked={localConfig.scriptDebug === 1} 
                onChange={() => handleConfigChange('scriptDebug', localConfig.scriptDebug === 1 ? 0 : 1)} 
                className="form-switch-glow"
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                启用脚本调试输出
              </Form.Text>
            </Form.Group>
          </div>
        </div>

        <div className="row mb-6">
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Label>冻结检查超时 (秒)</Form.Label>
              <Form.Control 
                type="number" 
                min="1" 
                max="30" 
                value={localConfig.freezeCheckTimeout} 
                onChange={(e) => handleConfigChange('freezeCheckTimeout', parseInt(e.target.value) || 5)} 
                className="glass-input"
                style={{backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff'}}
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                客户端无响应后等待的秒数
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Label>客户端超时 (秒)</Form.Label>
              <Form.Control 
                type="number" 
                min="5" 
                max="60" 
                value={localConfig.clientTimeout} 
                onChange={(e) => handleConfigChange('clientTimeout', parseInt(e.target.value) || 10)} 
                className="glass-input"
                style={{backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff'}}
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                客户端连接超时时间
              </Form.Text>
            </Form.Group>
          </div>
        </div>

        {/* 网络设置与限制 */}
        <h4 style={{color: '#ff6b6b', marginBottom: '15px', borderBottom: '1px solid rgba(255,255,255,0.1)', paddingBottom: '5px'}}>网络设置与限制</h4>
        <div className="row mb-4">
          <div className="col-md-4">
            <Form.Group className="mb-3">
              <Form.Label>全局队列大小</Form.Label>
              <Form.Control 
                type="number" 
                min="0" 
                max="100" 
                value={localConfig.globalQueueSize} 
                onChange={(e) => handleConfigChange('globalQueueSize', parseInt(e.target.value) || 20)} 
                className="glass-input"
                style={{backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff'}}
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                服务器队列中可容纳的最大玩家数量（默认：20）
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-4">
            <Form.Group className="mb-3">
              <Form.Label>最大消息发送量</Form.Label>
              <Form.Control 
                type="number" 
                min="32" 
                max="512" 
                value={localConfig.maxMsgSend} 
                onChange={(e) => handleConfigChange('maxMsgSend', parseInt(e.target.value) || 128)} 
                className="glass-input"
                style={{backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff'}}
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                服务器每秒可发送的最大消息数（默认：128），较高值可提高网络响应，过低可能导致网络延迟
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-4">
            <Form.Group className="mb-3">
              <Form.Label>最大自定义文件大小 (MB)</Form.Label>
              <Form.Control 
                type="number" 
                min="1" 
                max="50" 
                value={localConfig.maxCustomFileSize} 
                onChange={(e) => handleConfigChange('maxCustomFileSize', parseInt(e.target.value) || 10)} 
                className="glass-input"
                style={{backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff'}}
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                允许的最大自定义文件大小（MB，默认：10），影响服务器上可上传的自定义内容大小
              </Form.Text>
            </Form.Group>
          </div>
        </div>
      </Card.Body>
    </Card>
  );
};

export default SecuritySettings;